
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: dojo/request/xhr JSON</title>
		<link rel="stylesheet" href="css/style.css" media="screen">
	</head>
	<body>
		<h1>Demo: dojo/request/xhr JSON</h1>
		<p>Display JSON data received from the server</p>
		<div id="resultDiv">
		</div>
		<!-- load dojo and provide config via data attribute -->
		<script src="js/dojo/dojo.js"></script>
		<script>
			require(["dojo/dom", "dojo/request", "dojo/json",
					"dojo/_base/array", "dojo/domReady!"],
				function(dom, request, JSON, arrayUtil){
					// Results will be displayed in resultDiv
					var resultDiv = dom.byId("resultDiv");

					// Request the JSON data from the server
					request.get("json/ajax_get2.txt", {
						// Parse data from JSON to a JavaScript object
						handleAs: "json"
					}).then(function(data){
						// Display the data sent from the server
						var html = "<h2>JSON Data</h2>" +
							"<p>JSON encoded data:</p>" +
							"<p><code>" + JSON.stringify(data) + "</code></p>"+
							"<h3>Accessing the JSON data</h3>" +
							"<p><strong>title</strong> " + data.title + "</p>" +
							"<p><strong>items</strong> An array of items." +
							"Each item has a name and a value.  The type of " +
							"the value is shown in parentheses.</p><dl>";

						arrayUtil.forEach(data.items, function(item,i){
							html += "<dt>" + item.name +
								"</dt><dd>" + item.value +
								" (" + (typeof item.value) + ")</dd>";
						});
						html += "</dl>";

						resultDiv.innerHTML = html;
					},
					function(error){
						// Display the error returned
						resultDiv.innerHTML = error;
					});
				}
			);
		</script>
	</body>
</html>